<!DOCTYPE html>
<html lang="en">
<head lang="en">
    <meta charset="UTF-8">
    <title>农村房地一体网络公示平台</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!--<link rel="alternate icon" type="image/png" href="assets/i/favicon.png">-->
    <link rel="stylesheet" href="assets/css/amazeui.min.css"/>
    <script src="assets/js/zepto.min.js?ver=1.1.3"></script>
    <script src="assets/js/amazeui.js"></script>
    <script src="assets/js/handlebars.min.js
"></script>
    <script src="assets/js/amazeui.widgets.helper.js"></script>
    <style>
        .header {
            text-align: center;
        }
        .header h1 {
            font-size: 200%;
            color: #333;
            margin-top: 30px;
        }
        .header p {
            font-size: 14px;
        }
        .am-header-default .am-header-title{
            margin: 0 0;
        }
        .next-btn{
            width: 100%;
            background: #0e90d2;
            color: #fff;
        }
        .am-modal .am-modal-bd{
            width: 100vw;
            height: 300px;
        }
        .title{
            margin-top: 10px;
            margin-bottom: 0px;
        }
        #modalImg{
            width: 100vw;
            height: auto;
            left: 0;
            top: 20px;
            margin-left: 0;
            display: inline-block;
            margin-top: 0!important;
        }
        #modalImg .am-modal-bd{
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>

<header data-am-widget="header" class="am-header am-header-default">
    <div class="am-header-left am-header-nav" style="visibility: hidden">
        <a href="#left-link" class="">
            <i class="am-header-icon am-icon-home"></i>
        </a>
    </div>
    <h1 class="am-header-title">
        <a href="#title-link">农村房地一体网络公示平台</a>
    </h1>
</header>
<div class="am-g">
    <div class="col-lg-6 col-md-8 col-sm-centered">
        <h2 class="title">2、土地信息（宗地图、房产分户图）</h2>
        <hr>
        <div data-am-widget="tabs" class="am-tabs am-tabs-default">
            <ul class="am-tabs-nav am-cf">
                <li class="am-active">
                    <a href="[data-tab-panel-0]">宗地图</a>
                </li>
                <li class="">
                    <a href="[data-tab-panel-1]">房产分户图</a>
                </li>
            </ul>
            <div class="am-tabs-bd">
                <div data-tab-panel-0 class="am-tab-panel am-active">
                    <img  id="zdtdm" src="" alt="" onclick="viewImg('zdtdm')" data-am-modal="{target: '#modalImg'}">
                </div>
                <div data-tab-panel-1 class="am-tab-panel ">
                    <img id="fhtdm" src="" alt="" onclick="viewImg('fhtdm')" data-am-modal="{target: '#modalImg'}">
                </div>

            </div>
        </div>

        <script type="text/x-handlebars-template" id="amz-tpl">

            {{>slider slider}}

        </script>
        <hr>
        <button  type="button" class="am-btn am-btn-default next-btn" onclick="prePage()" >上一页</button>
        <button  type="button" class="am-btn am-btn-default next-btn" onclick="next()" >下一页</button>
    </div>
</div>

<footer data-am-widget="footer" class="am-footer am-footer-default" data-am-footer="{  }">
    <div class="am-footer-miscs ">
        <p>
            <a href="#" title="诺亚方舟" target="_blank"></a>Powered by 四川省川核测绘地理信息有限公司</p>
    </div>
</footer>


<div class="am-modal am-modal-no-btn" tabindex="-1" id="modalImg">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">
            <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
        </div>
        <div class="am-modal-bd">
            <img id="modal-img" style="height: 100%;width: 150%" src="" alt="">
        </div>
    </div>
</div>

<script src="js/jquery-3.4.1.js"></script>
<script src="js/axios.min.js"></script>
<script src="config.js"></script>


<script>
    var userInfo;
    var content ;
    var zdtdmurl;
    var fhtdmurl;
    /**
     * [通过参数名获取url中的参数值]
     * 示例URL:http://htmlJsTest/getrequest.html?uid=admin&rid=1&fid=2&name=小明
     * @param  {[string]} queryName [参数名]
     * @return {[string]}           [参数值]
     */
    function GetQueryValue(queryName) {
        var query = decodeURI(window.location.search.substring(1));
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == queryName) { return pair[1]; }
        }
        return null;
    }
    $(function() {
        userInfo=GetQueryValue('userInfo');
        var userInfoObj = JSON.parse(userInfo);

        zdtdmurl = baseUrl+"/nfzh/image/"+userInfoObj.zdtdm+"/preview";
        fhtdmurl = baseUrl+"/nfzh/image/"+userInfoObj.fhtdm+"/preview";
        var content = [];
       getImage(zdtdmurl,'zdtdm',function(src){
           $("#zdtdm").attr("src",zdtdmurl);
       })
        getImage(fhtdmurl,'fhtdm',function(src){
            $("#fhtdm").attr("src",fhtdmurl);
        })

    });

    function prePage() {
        location.href="one.html?userInfo="+userInfo;
    }
    function next() {
        location.href="three.html?userInfo="+userInfo;
    }

    function getImage(url,name,callback){
        var src = "";
        var xmlhttp;
        xmlhttp=new XMLHttpRequest();
        xmlhttp.open("GET",url,true);
        xmlhttp.responseType = "blob";
        xmlhttp.onload = function(){
            if (this.status == 200) {
                var blob = this.response;
                var img = document.createElement("img");
                img.onload = function(e) {
                    window.URL.revokeObjectURL(img.src);
                };
                img.src = window.URL.createObjectURL(blob);
                src = img.src;
//                $("#"+name).attr("src",src);
//                document.body.appendChild(img);
                callback(src)
            }
        }
        xmlhttp.send();
    }


    function viewImg(type) {
        if(type=="zdtdm"){
            getImage(zdtdmurl,'zdtdm',function(src){
                $("#modal-img").attr("src",zdtdmurl);
            })
        }else{
            getImage(fhtdmurl,'fhtdm',function(src){
                $("#modal-img").attr("src",fhtdmurl);
            })
        }
    }
</script>
</body>

</html>
